<script setup>
import { onLoad } from '@dcloudio/uni-app'
import SearchComponent from '@/components/SearchComponent/SearchComponent.vue'
import { getSystemInfo } from '@/utils/systemInfo.js'
import { ref } from 'vue'

const props = defineProps({
	isScroll: {
		type: Boolean,
		default: false
	}
})

// 头部导航栏总体高度
const navTotalHeight = ref(0)
// 头部导航栏高度
const navigationBarHeight = ref(0)
// 状态栏高度
const statusBarHeight = ref(0)
// 胶囊高度
const menuButtonHeight = ref(0)
// 比例系数
const scaleFactor = ref(0)
// 胶囊定位的左边Left
const menuBarLeft = ref(0)
// 胶囊定位的底部Bottom
const menuBarBottom = ref(0)
// 当前机型-屏幕宽度
const windowWidth = ref(0)

// h5端，app端自定义导航栏的高度
const navHeightOther = ref(75)

// 获取设备信息
const SystemInfo = async () => {
	const res = await getSystemInfo()
	// 通用平台
	statusBarHeight.value = res.statusBarHeight //状态栏高度
	scaleFactor.value = res.scaleFactor //比例系数
	windowWidth.value = res.windowWidth //当前设备的屏幕宽度
	// 微信小程序平台
	// #ifdef MP-WEIXIN
	navTotalHeight.value = res.navTotalHeight //头部导航栏总高度
	navigationBarHeight.value = res.navHeight //头部导航栏高度
	menuButtonHeight.value = res.menuButtonHeight //胶囊高度
	menuBarLeft.value = res.menuButtonLeft //胶囊左边界距离左上角的距离
	menuBarBottom.value = res.menuButtonBottom //胶囊底部距离页面顶端的距离
	// #endif
}

onLoad(() => {
	SystemInfo()
})
</script>

<template>
	<view>
		<!-- 微信小程序头部导航栏 -->
		<!-- #ifdef MP-WEIXIN -->
		<view class="wx-navbar" :style="{ height: navTotalHeight + 'rpx', backgroundImage: 'linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%)' }">
			<!-- 小程序logo -->
			<view v-show="!isScroll" class="logo" :style="{ height: navigationBarHeight + 'rpx', top: statusBarHeight + 'rpx' }">
				<image src="@/static/images/logo.png" mode="aspectFill"></image>
			</view>

			<!-- 小程序搜索框 -->
			<view
				class="wx-navbar-nav"
				:style="{
					height: isScroll ? navigationBarHeight + 'rpx' : menuBarBottom + 'rpx',
					top: isScroll ? statusBarHeight + 'rpx' : menuBarBottom + 'rpx',
					backgroundImage: 'linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);'
				}"
			>
				<!-- 搜索框 -->
				<view
					class="search"
					:style="{
						height: menuButtonHeight + 'rpx',
						width: isScroll ? menuBarLeft - 40 + 'rpx' : '100%',
						marginLeft: isScroll ? '20rpx' : ''
					}"
				>
					<SearchComponent></SearchComponent>
				</view>
			</view>
		</view>

		<!-- 占位元素 -->
		<view :style="{ height: navTotalHeight + menuBarBottom + 'rpx' }"></view>
		<!-- #endif -->

		<!-- 除微信小程序以外的其他设备 -->
		<!-- #ifndef MP-WEIXIN -->
		<view class="other-navbar" :style="{ height: navHeightOther * scaleFactor + statusBarHeight + 'rpx' }">
			<view class="other-navbar-nav" :style="{ height: navHeightOther * scaleFactor + 'rpx' }">
				<!-- 搜索框 -->
				<view class="search">
					<SearchComponent></SearchComponent>
				</view>
			</view>
		</view>
		<!-- #endif -->
	</view>
</template>

<style lang="scss" scoped>
/* #ifdef MP-WEIXIN */
.wx-navbar {
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 99;

	.logo {
		width: 45%;
		position: absolute;
		left: 0;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.wx-navbar-nav {
		width: 100%;
		position: absolute;
		left: 0;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		transition: all, 0.5s;
	}

	.search {
		display: flex;
		flex-direction: column;
		justify-content: center;
		transition: all 0.5s;
	}
}
/* #endif */

/* #ifndef MP-WEIXIN */
.other-navbar {
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 99;

	.other-navbar-nav {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		left: 0;
		bottom: 0;

		.search {
			background-color: #f8f8f8;
		}
	}
}
/* #endif */
</style>
